<template>
  <div class="Navbar">
    <Navbar/>
  </div>

  <div class="subscription-cards">
    <div v-for="(plan, index) in plans" :key="index" class="card">
      <h2 :style="{ color: plan.color }">{{ plan.title }}</h2>
      <p class="price">¥ {{ plan.price }} / {{ plan.duration }}</p>
      <ul>
        <li v-for="(feature, index) in plan.features" :key="index">
          <span>{{ feature.name }}</span>
          <span>{{ feature.available ? '✔️' : '❌' }}</span>
        </li>
      </ul>
      <el-button class="subscribe-btn" @click="handleSubscribe(plan.pic)">{{ plan.buttonText }}</el-button>
    </div>
  </div>

  <div class="but">
    <footers/>
  </div>
</template>
<script>
import api from "@/api/api.js";

export default {
  data() {
    return {
      plans: [
        {
          title: '',
          pic:null,
          price:null,
          duration: '90天',
          color: '#d4a056',
          features: [
            {name: '查看所有高隐藏内容', available: true},
            {name: '免费下载所有资源（10次/天）', available: true},


            {name: '发布文章', available: false},
            // 其他特性...
          ],
          buttonText: '立即加入',
        },
        {          pic:null,
          title: '',
          price:null,
          duration: '365天',
          color: '#73b16d',
          features: [
            {name: '查看所有高隐藏内容', available: true},
            {name: '免费下载所有资源（20次/天）', available: true},

            {name: '发布文章', available: false},
            // 其他特性...
          ],
          buttonText: '立即加入',
        },
        {          pic:null,
          title: '',
          price:null,
          duration: '终身',
          color: '#5e8ea4',
          features: [
            {name: '查看所有高隐藏内容', available: true},
            {name: '免费下载所有资源（99次/天）', available: true},

            {name: '发布文章', available: false},
            // 其他特性...
          ],
          buttonText: '终身会员',
        },
      ],
    };
  },
  computed: {

  },
  methods: {
    handleSubscribe(id) {
      api.post('/user/orderpay', {"id": id})
          .then(res => {
            console.log(res);
            if (res.data.code === 0) {
              window.open(res.data.data.payurl, '_blank')

            } else {
              // 处理非成功的状态码
              this.$message.error(res.data.message || '订单处理失败，请稍后再试');
            }
          })
          .catch(error => {
            // 捕获请求错误，并提示用户
            console.error('订单请求失败:', error);
            this.$message.error('订单请求失败，请检查是否已购买或未登录');
          })
          .finally(() => {
            // 请求完成后，无论成功或失败，都关闭加载状态
            this.loading = false;
          });
    },
  },
  mounted() {
    console.log('mounted');
    // 页面加载完成后，获取当前会员等级
    api.post('/user/order').then((res) => {
      if (res.data.code === 0) {
        console.log(res.data);


        // 假设 res.data.data.prices 是一个与 plans 一一对应的数组
        const newPrices = res.data.data;
        this.plans.forEach((plan, index) => {
          console.log(plan,  index);
          plan.price = newPrices[index].order_price;
          plan.pic = newPrices[index].id;
          plan.title = newPrices[index].order_name;

        });
      }
    });
  },
};
</script>
<style scoped>
.subscription-cards {
  margin-top: 100px;
  display: flex;
  justify-content: space-around;
  padding: 20px;
  background-color: #f5f5f5;
}


.card {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  width: 300px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.price {
  font-size: 24px;
  margin: 10px 0;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

.subscribe-btn {
  background-color: #ff7f00;
  border: none;
  padding: 10px 20px;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.subscribe-btn:hover {
  background-color: #e06c00;
}
@media (max-width: 768px) {
  .subscription-cards {
    flex-direction: column;
    align-items: center;

  }
  .card {
    margin-bottom: 20px;
  }
}
</style>
